<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单元素</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}ztree/css/zTreeStyle/zTreeStyle.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">文章ID</label>
            <div class="layui-input-inline">
              <input type="text" name="uid" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline">
              <input type="text" name="nickname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>


          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
            <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
          </div>
        </div>
      </div>
      <div class="layui-col-md3">


        <div class="layui-card">
          <div class="layui-card-header">菜单树</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <ul id="treeDemo" class="ztree"></ul>
          </div>
        </div>
      </div>
      <div class="layui-col-md9">
        <div class="layui-card">
          <div class="layui-card-header">菜单操作</div>
          <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="component-form-element">
              <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg12">
                  <label class="layui-form-label">菜单名称：</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-col-lg12">
                  <label class="layui-form-label">上级菜单：</label>
                  <div class="layui-input-block">
                    <select name="pid"  lay-filter="aihao">
                      <option value="0">顶级菜单</option>
                      @foreach($tree as $tk=>$tv)
                       <option value="{{$tv['id']}}">{!! $tv['title_show'] !!}</option>
                     @endforeach
                    </select>
                  </div>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-col-lg6">
                  <label class="layui-form-label">联接：</label>
                  <div class="layui-input-block">
                    <input type="text" name="url" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>
              <div class="layui-form-item">

              <div class="layui-col-lg6">
                <label class="layui-form-label">分组：</label>
                <div class="layui-input-block">
                  <input type="text" name="group" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>
                <div class="layui-col-lg6">
                  <label class="layui-form-label">图标：</label>
                  <div class="layui-input-block">
                    <input type="text" name="icon" placeholder="" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>

              <div class="layui-form-item">
              <div class="layui-col-lg6">
                <label class="layui-form-label">排序：</label>
                <div class="layui-input-inline">
                  <input type="text" name="sort" lay-verify="required" placeholder="0" autocomplete="off" class="layui-input">
                </div>
              </div>
              </div>


              <div class="layui-form-item">
                <label class="layui-form-label">是否隐藏：</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="hide" value="1" lay-skin="switch" lay-text="是|否">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">仅开发者模式可见：</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="is_dev" value="1" lay-skin="switch" lay-text="是|否">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">其它信息：</label>
                <div class="layui-input-block">
                  <textarea name="tip" placeholder="" class="layui-textarea"></textarea>
                </div>
              </div>
              <input type="hidden" name="id" value="" />
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="component-form-element">保存菜单</button>
                  <button type="reset" class="layui-btn layui-btn-primary">添加</button>
                  <button type="reset" class="layui-btn layui-btn-danger">删除菜单</button>
                  <button class="layui-btn layui-btn-warm" data-type="sub_add"  >添加子菜单</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
  <script src="{{ADMIN_PATH}}ztree/js/jquery-1.4.4.min.js"></script>
  <script src="{{ADMIN_PATH}}ztree/js/jquery.ztree.core.js"></script>
  <script>
    var save_url="{{url('admin/menu/save')}}"
    var edit_url="{{url('admin/menu/edit')}}"

    var submit_form;
  layui.config({
    base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,element = layui.element
    ,form = layui.form;
      var active = {
          add: function(){
              alert('aaaaaaaaaaa');
              return false;
          }
      };
    form.render(null, 'component-form-element');
    element.render('breadcrumb', 'breadcrumb');
    
    form.on('submit(component-form-element)', function(data){
        $.post(save_url, data.field, success, "json");
          return false;
    });

      //========================表单数据返回处=====================================
      function success(res){
          if(res.status==200){

          }else{
              layer.msg("操作失败");
          }
      }
      submit_form=form;

  });
  </script>

  <SCRIPT type="text/javascript">
      <!--
      var setting = {
          data: {
              simpleData: {
                  enable: true
              }
          },
          callback: {

              onClick: onClick
          }
      };

      var zNodes ={!! $menu_list !!};
      var  className = "dark";

      function onClick(event, treeId, treeNode, clickFlag) {
          $.ajax({
              type: 'POST',
              url: edit_url,
              data: {id:treeNode.id},
              async: false,
              dataType: 'json',
              success: function (res) {
                  if (res.status==200) {
//========================表单数据宣染=====================================
                      submit_form.val("component-form-element",res.data);
                  } else {
                      layer.msg(res.msg);
                  }
              },
              error: function () {
                  ui.error("绯荤粺寮傚父");
              }
          });
      }
      function getTime() {
          var now= new Date(),
              h=now.getHours(),
              m=now.getMinutes(),
              s=now.getSeconds();
          return (h+":"+m+":"+s);
      }

      $(document).ready(function(){
          $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });
      //-->
  </SCRIPT>
</body>
</html>